//图片路径
const url = 'http://localhost:8888/uploads/'
//获取轮播图列表
$(function () {
    // 获取轮播图列表数据
    function loadSwiperList() {
        //获取之前先清空列表
        $('tbody').empty();
        $.ajax({
            type: 'get',
            url: 'admin/swipers',
            success: function (res) {
                console.log(res);

                //遍历数据添加到页面
                res.data.forEach(itme => {
                    const tr = `
                          <tr>
                                <th id="ID">${itme.id}</th>
                                <th><img src="${url + itme.swiperimg}" alt=""></th>
                                <th>${itme.swiperimg}</th>
                                <th>
                                  <button type="button" class="layui-btn layui-btn-xs qy" id="qy${itme.id}" IDd="${itme.id}" status="1">启用</button>
                                  <button type="button" class="layui-btn layui-btn-xs jy" id="jy${itme.id}" IDd="${itme.id}" status="2">禁用</button>
                                </th>
                            <th><button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon" id="del" IDd="${itme.id}"></i></button></th>
                           </tr> `

                    $('.layui-table tbody').append(tr)
                    // 根据swiperstates值改变状态样式
                    if (itme.swiperstatus == 1) {
                        $(`#qy${itme.id}`).css({ backgroundColor: 'green' });
                        $(`#jy${itme.id}`).css({ backgroundColor: ' rgb(199, 191, 191)' });

                    }
                    if (itme.swiperstatus == 2) {
                        $(`#jy${itme.id}`).css({ backgroundColor: 'green' })
                        $(`#qy${itme.id}`).css({ backgroundColor: ' rgb(199, 191, 191)' })

                    }


                });



            }
        })
    }
    loadSwiperList()



    //修改轮播图状态
    //启用
    $('tbody').on('click', '.qy', function () {
        const ID = $(this).attr('IDd');
        const status = +$(this).attr('status');

        //按钮点击后发送请求
        console.log('111');
        $.ajax({
            type: 'put',
            url: 'admin/swipers/' + ID,
            data: {
                status: status
            },
            success: function (res) {
                if (res.status === 0) {
                    // 切换成功
                    layer.msg(res.message)
                    loadSwiperList()
                }
            }
        })
    })
    //禁用
    $('tbody').on('click', '.jy', function () {
        const ID = $(this).attr('IDd');
        const status = +$(this).attr('status');
        //按钮点击后发送请求
        console.log('111');
        $.ajax({
            type: 'put',
            url: 'admin/swipers/' + ID,
            data: {
                status: status
            },
            success: function (res) {
                if (res.status === 0) {
                    // 切换成功
                    layer.msg(res.message)
                    loadSwiperList()
                }
            }
        })
    })

    //上传轮播图
    $('#uploadSwiper').click(function () {
        console.log('aa');
        $('#myfile').click();

    })
    $('body').on('change', '#myfile', function () {
        //获取用户选择的图片
        let file = this.files;
        //创建FormData对象：参数是表单dom对象
        let fd = new FormData();
        $.each(file, function (index, item) {
            fd.append('swipers', item)
        })
        console.dir(fd);
        // 发请求
        $.ajax({
            url: 'admin/swipers',
            type: 'post',
            dataType: 'json',
            data: fd,
            contentType: false,
            processData: false,
            success: function (res) {
                if (res.status === 0) {
                    loadSwiperList()
                }
            }
        });
    });



    //删除轮播图
    $('tbody').on('click', '#del', function () {
        const ID = $(this).attr('IDd')
        console.log(ID);
        console.log('aa');
        $.ajax({
            type: 'delete',
            url: 'admin/swipers/' + ID,
            success: function (res) {
                if (res.status === 0) {
                    // 删除成功
                    loadSwiperList()
                }
            }
        })
    })

    // $('tbody').on('click', '#del', function (e) {
    //     var id = $(e.target).data('#ID')
    //     console.log( e.target );
    //     console.log( id );
    //     layer.confirm('确实要删除吗？', function (index) {
    //       $.ajax({
    //         type: 'delete',
    //         url: 'admin/swipers/' + id,
    //         success: function (res) {
    //           if (res.status === 0) {
    //             // 删除成功
    //             layer.close(index)
    //             loadSwiperList()
    //           }
    //         }
    //       })
    //     })
    //   })

})

